<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>收件箱</title>
    <base href="${pageContext.request.contextPath}/">
    <link type="text/css" rel="stylesheet" href="css/bootstrap.css"/>
    <link href="yemianCss/receiptBox2.css" rel="stylesheet" type="text/css"/>
    <script src="js/jquery-3.2.1.js"></script>
    <script src="js/bootstrap.js"></script>
    <style>
        span {
            font-size: 13px;
            padding: 5px;
        }

        #foot {
            line-height: 30px;
        }


        .pageBox {
            position: absolute;
            right: 30px;
        }

        .pageBox span, a {
            font-size: 12px;
        }

        span, a {
            color: #337ab7;
        }

        button {
            cursor: pointer;
            font-size: 13px;

        }

        input[type="checkbox"] {
            height: 10px;
            width: 10px;
            cursor: pointer;
            margin-left: 3px;
        }

        .backColor {
            background-color: #528BCB;
        }

        p {
            margin: 0;
        }

        .dropdown-menu {
            min-width: 100px;
        }
        .yellow{
            color: yellow;
        }

        .ifRead0{
        color: rgb(250,224,180)
        }

        .ifRead1{
        color: rgb(230,230,229)
        }
        .changePage{
            width: 10px;
        }
    </style>
</head>

<body style="overflow:-Scroll;overflow-x:hidden">
<div style="margin-left: 10px;margin-top: 15px"><span style="font-size: 15px;font-weight: bold;color: black">
		收件箱</span><span>(共 ${allCount} 封),其中<a style="color: green">未读邮件</a>${shouCount}封</span>
</div>
<div id="d1" style="display: flex">
    <button class="btn btn-default" onclick="updateMailStatus1()">删除</button>
    <button class="btn btn-default">彻底删除</button>
    <button class="btn btn-default">转发</button>
    <button class="btn btn-default" onclick="updateMailStatus5()">举报</button>
    <button class="btn btn-default" onclick="updateIfReadMail()">全部标为已读</button>
    <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true"
                aria-expanded="true">
            标记为...
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
            <li><a href="javaScript:void(0)" onclick="ifRead1()">已读邮件</a></li>
            <li><a href="javaScript:void(0)" onclick="ifRead0()">未读邮件</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="javaScript:void(0)" onclick="updateMailStarMarks()">星标邮件</a></li>
            <li><a href="javaScript:void(0)"  onclick="updateMailStarMarks0()">取消星标</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">新建标签</a></li>
        </ul>
    </div>
    <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true"
                aria-expanded="true">
            移动到...
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
            <li><a href="#">收件箱</a></li>
            <li><a href="#">已发送</a></li>
            <li><a href="#">qq邮箱订阅</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">新建文件夹</a></li>
        </ul>
    </div>

    <div class="pageBox" style="display: flex">
        <span style="padding: 0;margin-right: 5px">${pageInfo.pageNum}/${pageInfo.pages}</span>
        <c:if test="${pageInfo.hasPreviousPage}">
            <a href="receiptBox?pageIndex=${pageInfo.prePage}" style="margin-right: 20px">上一页</a>
        </c:if>

        <c:if test="${pageInfo.hasNextPage}">
            <a href="receiptBox?pageIndex=${pageInfo.nextPage}" style="margin-right: 20px">下一页</a>
        </c:if>
        <a href="javaScript:void(0)" onclick="jump(this)" onblur="closeJump(this)" style="margin-right: 5px">跳转</a>
        <form method="get" class="changePageForm" onsubmit="validation(this)" data-id="${pageInfo.pages}">
            <div class="changePage" style="display: flex;margin-right: 50px">
                <input type="text" name="pageIndex"  style="width: 40px;height: 20px">
                <button type="submit" class="btn btn-default"  style="height: 20px;width: 45px">确定</button>
            </div>
        </form>

    </div>

</div>
<div id="headdiv" style="display: flex">
    <input type="checkbox" class="checkedAll"/>
    <div style=" border-left: #C1C8D2;"><img src="image/1670328603211(1).jpg"
                                             style="width: 37px;height: 20px;margin-left: 15px"/></div>
    <div style="border-right:2px solid #C1C8D2;font-size: 10px;width: 100px;text-align: center">发件人</div>
    <div style="border-right:2px solid #C1C8D2;font-size: 10px;width: 800px;margin-left: 80px">主题</div>
    <div style="width: 200px;text-align: right;font-size: 10px">时间</div>
</div>

<c:forEach items="${pageInfo.list}" var="item" varStatus="vs">
    <c:if test="${vs.count==1}">
        <c:if test="${emailDtos.todayCount>0}">
            <span class="todayTitle" style="font-weight: bold">今天 (${emailDtos.todayCount} 封)</span>
            <div style="width: 100%;border-top: 1px solid #A7C5E2;"></div>
        </c:if>
    </c:if>

    <c:if test="${vs.count==emailDtos.todayCount+1}">
        <c:if test="${emailDtos.yesterdayCount>0}">
            <span style="font-weight: bold">昨天 (${emailDtos.yesterdayCount} 封)</span>
            <div style="width: 100%;border-top: 1px solid #A7C5E2;"></div>
        </c:if>
    </c:if>

    <c:if test="${vs.count==emailDtos.yesterdayCount+emailDtos.todayCount+1}">
        <c:if test="${emailDtos.weekCount>0}">
            <span style="font-weight: bold">本周 (${emailDtos.weekCount} 封)</span>
            <div style="width: 100%;border-top: 1px solid #A7C5E2;"></div>
        </c:if>

    </c:if>

    <c:if test="${vs.count==emailDtos.weekCount+emailDtos.yesterdayCount+emailDtos.todayCount+1}">
        <c:if test="${emailDtos.erilyCount>0}">
            <span style="font-weight: bold">更早 (${emailDtos.erilyCount} 封)</span>
            <div style="width: 100%;border-top: 1px solid #A7C5E2;"></div>
        </c:if>
    </c:if>
    <jsp:useBean id="now" class="java.util.Date"/>
    <fmt:formatDate value="${now}" type="both" dateStyle="long" pattern="yyyy-MM-dd" var="nowdate"/>
    <p class="today" style="position: relative" data-id="${item.id}">
        <input type="checkbox" class="checkOneP" data-id="${item.id}"/>
        <span class="glyphicon glyphicon-envelope" aria-hidden="true"
              style="position: absolute; left:30px;"
              data-id="${item.mailexplain.ifRead}"></span>
        <span style="position: absolute;left: 80px;bottom: -5px;">${item.user1.username}</span>
        <span style="position: absolute;left: 180px;bottom: -5px">${item.theme}&nbsp;&nbsp;-&nbsp;&nbsp;<span
                style="color: rgb(160,160,180);font-size: 10px">${item.content}</span></span>
        <span style="position: absolute;left:1200px;bottom: -5px">
      <fmt:parseDate value="${item.receivingtime}" pattern="yyyy-MM-dd " var="time"/>
   <span class="time">
       <fmt:formatDate value="${time}" pattern="yyyy-MM-dd "/></span>
					<span class="glyphicon glyphicon-star" aria-hidden="true" title="<c:if test="${item.mailexplain.ifStarmarker==0}">标为星标</c:if><c:if test="${item.mailexplain.ifStarmarker==1}">取消星标</c:if>"

                          data-id="${item.mailexplain.ifStarmarker}" onclick="updateMailStarMark(${item.id},this)"></span>
				</span>


    </p>

</c:forEach>


<!--结束-->
<div id="foot">
    <span style="color: #798699;">选择:</span>&nbsp;&nbsp;
    <a href="" style="color: #62B0E3;">全部</a>
    <span style="color: #62B0E3;">-</span>
    <a href="" style="color: #62B0E3;">无</a>
    <span style="color: #62B0E3;">-</span>
    <a href="" style="color: #62B0E3;">已读</a>
    <span style="color: #62B0E3;">-</span>
    <a href="" style="color: #62B0E3;">未读</a>
</div>
<!--尾部-->
<div id="d2" style="display: flex">
    <button class="btn btn-default">删除</button>
    <button class="btn btn-default">彻底删除</button>
    <button class="btn btn-default">转发</button>
    <button class="btn btn-default" onclick="updateMailStatus5()">举报</button>
    <button class="btn btn-default">全部标为已读</button>
    <div class="dropup">
        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true"
                aria-expanded="true">
            标记为...
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
            <li><a href="#">已读邮件</a></li>
            <li><a href="#">未读邮件</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">星标邮件</a></li>
            <li><a href="#">取消星标</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">新建标签</a></li>
        </ul>
    </div>
    <div class="dropup">
        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true"
                aria-expanded="true">
            移动到...
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
            <li><a href="#">收件箱</a></li>
            <li><a href="#">已发送</a></li>
            <li><a href="#">qq邮箱订阅</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">新建文件夹</a></li>
        </ul>
    </div>
    <div class="pageBox" style="display: flex">
        <span style="padding: 0;margin-right: 5px">${pageInfo.pageNum}/${pageInfo.pages}</span>
        <c:if test="${pageInfo.hasPreviousPage}">
            <a href="receiptBox?pageIndex=${pageInfo.prePage}" style="margin-right: 20px">上一页</a>
        </c:if>

        <c:if test="${pageInfo.hasNextPage}">
            <a href="receiptBox?pageIndex=${pageInfo.nextPage}" style="margin-right: 20px">下一页</a>
        </c:if>
        <a href="javaScript:void(0)" onclick="jump(this)" onblur="closeJump(this)" style="margin-right: 5px">跳转</a>
        <form method="get" class="changePageForm">
            <div class="changePage" style="display: flex;margin-right: 50px">
                <input type="text" name="pageIndex" style="width: 40px;height: 20px" >
                <button type="submit" class="btn btn-default" style="height: 20px;width: 45px" >确定</button>
            </div>
        </form>
    </div>
</div>
</body>
</html>
<script>
    /**
     * 全部复选框选中
     */
    $('.checkedAll').on('click', function () {
        if ($(this).prop('checked') == true) {
            $('.today').addClass('backColor');
            $('.last_week').addClass('backColor');
            $('.context').addClass('backColor');
            $('input[type="checkbox"]').prop('checked', true);
        } else {
            $('.context').removeClass('backColor');
            $('.today').removeClass('backColor');
            $('.last_week').removeClass('backColor');
            $('input[type="checkbox"]').prop('checked', false);
        }

    })
    //点击跳转
    function  jump(a){
        $(a).siblings('.changePageForm').css('display','block'); //显示跳转表单
    }

    /**
     * 验证跳转的页数有没有大于数据总页数
     */
    function validation(pages){
      var index=$(pages).find(`input[name='pageIndex']`).val();

        if (index> $(pages).data("id")){
            index=$(pages).data("id");
            $(pages).find(`input[name='pageIndex']`).val(index);
        }
    }


    /**
     * 窗口加载
     */
    $(function () {

       $('.changePageForm').css('display','none');  //隐藏跳转表单
        /**
         * 判断该邮箱的是否已读
         */
        $('.glyphicon-envelope').each(function () {
            if ($(this).data("id") == 1) {
                $(this).addClass('ifRead1')
            } else {
                $(this).addClass('ifRead0')
            }
        })

        $('.glyphicon-star').each(function () {
            if ($(this).data("id") == 1) {
                $(this).addClass('yellow');
            }else{
                $(this).removeClass('yellow');
            }
        })

        $('.checkOneP').on('click', function () {
            if ($(this).prop('checked') == true) {
                $(this).closest('p').addClass('backColor')
            } else {
                $(this).closest('p').removeClass('backColor')
            }
        })

    })


    //删除邮件
    function updateMailStatus1(){
        var ids = new Array();  //创建一个数组
        $('.checkOneP').each(function (){   //循环所有选中的复选框并得到 id
            if ($(this).prop('checked') == true) {
                ids.push($(this).data("id"));
            }
        })

        if (ids.length==0){
            alert("没有选中的邮件！");
            return false;
        }

        var mailnumber= ids.join(',');  //用逗号分割数组
        var mailstatus=1;
        $.post("api/updateMailStatus",{mailnumber:mailnumber,mailstatus:mailstatus},function (r){
            if (r>0){
                  location.reload();
            }

        })
    }

    //多个标记为星标邮件
    function updateMailStarMarks(){
        var ids = new Array();  //创建一个数组
        $('.checkOneP').each(function (){   //循环所有选中的复选框并得到 id
            if ($(this).prop('checked') == true) {
                ids.push($(this).data("id"));
            }
        })

        if (ids.length==0){
            alert("没有选中的邮件！");
            return false;
        }

        var mailnumber= ids.join(',');  //用逗号分割数组
        $.post("api/updateMailStarMarks",{mailnumber:mailnumber},function (r){
            if (r>0){
                location.reload();
            }
        })
    }

    //多个取消星标邮件
    function updateMailStarMarks0(){
        var ids = new Array();  //创建一个数组
        $('.checkOneP').each(function (){   //循环所有选中的复选框并得到 id
            if ($(this).prop('checked') == true) {
                ids.push($(this).data("id"));
            }
        })

        if (ids.length==0){
            alert("没有选中的邮件！");
            return false;
        }

        var mailnumber= ids.join(',');  //用逗号分割数组
        $.post("api/updateMailStarMarks0",{mailnumber:mailnumber},function (r){
            if (r>0){
                location.reload();
            }
        })
    }
    //单个标记或取消星标邮件
    function updateMailStarMark(mailnumber,star){
        var ifStarmarker=$(star).data('id');
        if (ifStarmarker==0){
            ifStarmarker=1
        }else {
            ifStarmarker=0
        }
       $.post(`api/updateMailStarMark/`+ifStarmarker+`/`+mailnumber+``,function (r){
           if (r>0){
                   $(star).data('id',ifStarmarker);
                $(star).toggleClass('yellow');
           }
       })

    }

    /**
     * 举报邮箱
     */
    function updateMailStatus5(){
        var ids = new Array();  //创建一个数组
        $('.checkOneP').each(function (){   //循环所有选中的复选框并得到 id
            if ($(this).prop('checked') == true) {
                ids.push($(this).data("id"));
            }
        })

        if (ids.length==0){
            alert("没有选中的邮件！");
            return false;
        }

        var mailnumber= ids.join(',');  //用逗号分割数组
        var mailstatus=5;
        $.post("api/updateMailStatus5",{mailnumber:mailnumber,mailstatus:mailstatus},function (r){
            if (r>0){
                location.reload();
            }

        })
    }

    /**
     * 将本页所有邮件变为已读
     */
    function updateIfReadMail(){
        var ids = new Array();  //创建一个数组
        $('.checkOneP').each(function (){   //循环所有选中的复选框并得到 id
                ids.push($(this).data("id"));
        })

        var mailnumber= ids.join(',');  //用逗号分割数组


        $.post("api/updateIfReadMail",{mailnumber:mailnumber},function (r){
            if (r>0){
                location.reload();
            }

        })
    }

    /**
     * 让选中邮件变未读
     */
    function ifRead0(){
        var ids = new Array();  //创建一个数组
        $('.checkOneP').each(function (){   //循环所有选中的复选框并得到 id
            if ($(this).prop('checked') == true) {
                ids.push($(this).data("id"));
            }
        })

        if (ids.length==0){
            alert("没有选中的邮件！");
            return false;
        }

        var mailnumber= ids.join(',');  //用逗号分割数组
        var ifRead=0;
        $.post("api/updateIfReadMails",{mailnumber:mailnumber,ifRead:ifRead},function (r){
            if (r>0){
                location.reload();
            }

        })
    }

    /**
     * 让邮件变为已读
     * @returns {boolean}
     */
    function ifRead1(){
        var ids = new Array();  //创建一个数组
        $('.checkOneP').each(function (){   //循环所有选中的复选框并得到 id
            if ($(this).prop('checked') == true) {
                ids.push($(this).data("id"));
            }
        })

        if (ids.length==0){
            alert("没有选中的邮件！");
            return false;
        }

        var mailnumber= ids.join(',');  //用逗号分割数组
        var ifRead=1;
        $.post("api/updateIfReadMails",{mailnumber:mailnumber,ifRead:ifRead},function (r){
            if (r>0){
                location.reload();
            }

        })
    }
</script>
